<template>
  <div class="singer" ref="singer">
      <list-view :data="singers"></list-view>
   </div>
</template>

<script type="text/ecmascript-6">
  import Singer from 'common/js/singer'
  import {getSingerList} from 'api/singer'
  import {ERR_OK} from 'api/config'
  const  HOT_NAME='热门'
  const HOT_SINGER_LEN='10'
  import listView from 'base/listview/listview'
  export default {
    data(){
     return{
       singers:[],
     }
    },
    components:{
      listView
    },
    created(){
      this._getSingerList();
    },
    methods:{
      _getSingerList(){
        getSingerList().then((res)=>{
          if(res.code===ERR_OK){
            this.singers=this._normalizeSinger(res.data.list);
          }
        })
      },
      _normalizeSinger(list){
          let map={
            hot:{
              title:HOT_NAME,
              items:[]
            }
          }
//        将100条数据分组，分别放到热门和A-Z的数组里面
          list.forEach((item,index)=>{
            if(index<=HOT_SINGER_LEN){
              map.hot.items.push(new Singer({
                id:item.Fsinger_mid,
                name:item.Fsinger_name
              }))}
             const key =item.Findex;
              if(!map[key]){
                map[key]={
                  title:item.Findex,
                  items:[]
                }
              }
              map[key].items.push(new Singer({
                id:item.Fsinger_mid,
                name:item.Fsinger_name
              }))
          })
              //对map数组进行排序处理
              let hot =[]
              let words=[]
              for( let k in map ){
                let val = map[k]
                if(val.title.match(/[a-zA-Z]/)){
                  words.push(val)
                }
                if(val.title===HOT_NAME){
                  hot.push(val)
                }
              }
            words.sort((a,b)=>{
              return a.title.charCodeAt(0)-b.title.charCodeAt(0);
            })

        return hot.concat(words);
      }
    }
  }
</script>

<style scoped lang="scss" rel="stylesheet/css">
  .singer {
    position: fixed;
    top: 88px;
    bottom: 0;
    width: 100%;
  }
</style>
